import { FC, useEffect, useState } from "react";
import React from 'react';
import { Layout } from 'antd';
import { Table, Button, Input } from 'antd';
import type { ColumnsType } from 'antd/lib/table';
// 引入css
import "../../static/css/wrieoff/journal.css"
// 引入掉数据的接口
import { GetJournal } from "../../apis/writeoff/journal"

import { Pagination } from 'antd';

interface DataType {
   key: React.Key;
   id: string,
   v_id: string,
   name: string,
   openid: string,
   username: string,
   addtime: string,
}
// 定义接口
interface IJournal {
   page: number
   pageSize: number
   idorname?: string
}

const { Header, Content } = Layout;

const WrieoffJournal: FC = (): JSX.Element => {
   // 列表标题
   const columns: ColumnsType<DataType> = [
      {
         title: 'id',
         dataIndex: 'id',
      },
      {
         title: ' 访客人姓名',
         dataIndex: 'name',
      },
      {
         title: '核销人姓名',
         dataIndex: 'username',
      },
      {
         title: '核销时间',
         dataIndex: 'addtime',
      },
   ];

   // 定义数组
   const [fenye, setFenye] = useState()
   // console.log(fenye);

   const onShowSizeChange = (page:number, pageSize:number) => {
      // console.log(page,pageSize);
      setParams({page:page,pageSize:pageSize})
   };
   
   const [JournalList, setJournalList] = useState<any>()
   const [params, setParams] = useState<IJournal>({ page:1, pageSize:10 })
   // 列表调接口
   const journals = async () => {
      const res: any = await GetJournal({ ...params, idorname: value })
      // console.log(res);
      if (res.code === "00000") {
         setJournalList(res.data.data)
         setFenye(res.data.total)
      }
   }
   // 页面加载前调用列表数据
   useEffect(() => {
      journals()
   }, [params])

   // 选中拿到的值
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
   const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
      setSelectedRowKeys(newSelectedRowKeys);
   };

   const rowSelection = {
      selectedRowKeys,
      onChange: onSelectChange,
   };
   const [value, setValue] = useState()
   // 核销人员内容改变
   const input = (e: any) => {
      // console.log(e.target.value);
      setValue(e.target.value)
   }
   // 点击查询
   const cha = () => {
      journals()
   }
   return (
      <div className="WrieoffJournal">
         <Layout>
            <Header>
               <div>
                  <Input placeholder="请输入核销人员的姓名" onChange={input} className="ant_input" />
                  <Button type="primary" size="small" onClick={cha} className="ant_btns">查询</Button>
               </div>
            </Header>
            <Content>
               <Table pagination={false} bordered={true} rowSelection={rowSelection} columns={columns} dataSource={JournalList} rowKey="id" />
               {/* 共{fenye}条 */}
               <Pagination
                  showSizeChanger
                  onChange={onShowSizeChange}
                  total={fenye}
                  showTotal={fenye => `共 ${fenye} 条`}
               />
            </Content>
         </Layout>
      </div>
   )
}

export default WrieoffJournal;